<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form layout="inline" @submit.prevent="save" class="ant-advanced-update-form">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.id')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input placeholder="input placeholder" v-model="$v.department.id.$model" id="department-id" name="id" read-only />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.name')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input placeholder="input placeholder" v-model="$v.department.name.$model" id="department-name" name="name" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.code')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input placeholder="input placeholder" v-model="$v.department.code.$model" id="department-code" name="code" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.address')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input placeholder="input placeholder" v-model="$v.department.address.$model" id="department-address" name="address" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.phoneNum')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input placeholder="input placeholder" v-model="$v.department.phoneNum.$model" id="department-phoneNum" name="phoneNum" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.logo')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input placeholder="input placeholder" v-model="$v.department.logo.$model" id="department-logo" name="logo" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.contact')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input placeholder="input placeholder" v-model="$v.department.contact.$model" id="department-contact" name="contact" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.createUserId')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input
              placeholder="input placeholder"
              v-model="$v.department.createUserId.$model"
              id="department-createUserId"
              name="createUserId"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.createTime')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-date-picker id="department-createTime" name="createTime" show-time v-model="$v.department.createTime.$model">
            </a-date-picker>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.authorities')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-tree-select
              allowClear
              id="department-authorities"
              name="authorities"
              v-model="department.authoritiesId"
              :treeData="authorityNzTreeNodes"
              multiple
            >
            </a-tree-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('workflowApp.settingsDepartment.parent')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-select id="department-parent" name="parent" v-model="department.parentId">
              <a-select-option v-bind:value="departmentOption.id" v-for="departmentOption in departments" :key="departmentOption.id">{{
                departmentOption.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex" justify="center">
        <a-col span="3">
          <a-button @click="previousState()">{{ $t('entity.action.cancel') }}</a-button>
        </a-col>
        <a-col span="3">
          <a-button html-type="submit" type="primary" :disabled="$v.department.$invalid || isSaving">{{
            $t('entity.action.save')
          }}</a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<script lang="ts" src="./department-update-template.component.ts"></script>
<style>
.ant-advanced-update-form .ant-form-item {
  display: flex;
}
.ant-advanced-update-form .ant-form-item-control-wrapper {
  flex: 1;
}
</style>
